<template>
	<view class="converge">
		<view class="bg-height"></view>
		<!-- 搜索条 -->
		<view class="search flex-box">
			<image src="../../static/index/logo.png" class="search-logo"></image>
			<view class="box-1 box3">
				<u--input shape="circle" placeholder="请输入搜索信息" prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399" v-model="keyword" confirm-type="search" :clearable="true"
					@confirm="searchList"></u--input>
			</view>
		</view>
		<view class="top-model">

			<view class="banner">
				<swiper radius="10" class="screen-swiper square-dot" :indicator-dots="true" :circular="true"
					:autoplay="true" :interval="5000" duration="500">
					<swiper-item v-for="(item,ids) in swiperList" @tap="jumpType(item,key1)">
						<image :src="item.imgurl" class="border-radius50"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 快捷导航 -->
			<view class="qknav flex-box">
				<view @click="onClassFiy(item)" class="box-1" v-for="(item, index) in category" :key="index"
					v-if="index<5">
					<image class="qknav_image" :src="item.image"></image>
					<view class="qknav_text">{{ item.name }}</view>
				</view>
			</view>

		</view>
		<!-- banner -->
		<image :src="banner.imgurl" class="icon-shopkeeper"
			mode="widthFix" @tap="jumpType(banner)"></image>
		<!-- 公告 -->
		<view class="notice-box flex-box">
			<image src="../../static/index/notice.png" class="icon-notice"></image>
			<swiper class="box-1 swiper-box" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="3000"
				:circular="true" :vertical="true">
				<swiper-item v-for="(item,index) in noticeList" :key="index">
					<view class="swiper-item">{{item}}</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 猜你喜欢 -->
		<view class="recommend-info">
			<view class="recommend-title flex-box">
				<image src="../../static/index/bt-text1.png" class="icon-title"></image>
				<text class="f-w">精选推荐</text>
				<image src="../../static/index/bt-text1.png" class="icon-title transform-180"></image>
			</view>
			<view style="margin: 10rpx 0" v-if="showLoading">
				 <u-loading-icon text="加载中..." size="20" mode="circle"></u-loading-icon> 
			</view>

			<mescroll-body @init="mescrollInit" height="100px" @down="downCallback" @up="upCallback">
				<converge-list v-if="goodsList.length" :tab="1" :list="goodsList" :sw-level="swLevel"></converge-list>
			</mescroll-body>

		</view>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState
	} from 'vuex'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			TabBar,
		},
		data() {
			return {
				showLoading: false,
				keyword: '',
				shopName: '',
				comm_img_url: '',
				isHotline: false,
				goodsList: [],
				opcity: 0,
				appImg: '',
				menuButtonInfo: 0,
				navBarHeight: 0,
				// 页面高度
				pageHeight: 500,
				page: 1,
				pageSize: 20,
				category: [{
					name:'全年抗衰',
					url:'/pages/GoodsDetails/GoodsDetails?id=14',
					image:'../../static/index/list-1.png',
				},{
					name:'分享好友',
					url:'/pages/sub/invite/invite',
					image:'../../static/index/list-2.png',
				},{
					name:'女神权益',
					url:'/pages/converge/goddess',
					image:'../../static/index/list-3.png',
				},{
					name:'常见问题',
					url:'/pages/sub/Problem/Problem',
					image:'../../static/index/list-4.png',
				},{
					name:'客服中心',
					url:'/pages/sub/service/service',
					image:'../../static/index/list-5.png',
				},],
				swiperList: [],
				swLevel: 0,
				noticeList:[],
				banner:{}
			};
		},
		onLoad() {
			this.comm_img_url = this.$c.appImg
			this.appImg = this.$c.appImg
			// this.getCategory()
			this.getAds()
		},
		onShow() {
			if (this.hasLogin) {}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			// 搜索
			searchList(e) {
				uni.pageScrollTo({
					scrollTop: 500,
					duration: 500
				})
				this.mescroll.resetUpScroll() // 重新触发upCallback

			},
			jumpType(item, key) {
				var path = item.link;
				if (item.link_type == 1) {
					uni.navigateTo({
						url: "/pages/web-view/web-view?url=" + JSON.stringify(path)
					})
				} else if (item.link_type == 2) {
					uni.switchTab({
						url: path
					})
				} else if (item.link_type == 3) {
					uni.navigateTo({
						url: path
					})
				}
			},
			// 首页广告
			getAds() {
				// banner
				this.$u.api.souceAds({
						type: 1,

					}).then(res => {
						if (res.status) {
							this.swiperList = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
				//消息轮播
				this.$u.api.noticeList()
				.then(res=>{
					if(res.status){
						this.noticeList = res.msg
					}
				});
        this.$u.api.souceAds({
						type: 2,
					}).then(res => {
						if (res.status) {
							this.banner = res.msg[0]
						}
					})
					.catch(err => {
						console.log(err);
					})

			},
			//商品分类
			getCategory() {
				this.$u.api.goodsCategory()
				.then(res => {
					if (res.status) {
						this.category = res.msg
					}
				})
				.catch(err => {
					console.log(err);
				})
			},
			/**
			 * 我的服务点击
			 */
			onServer(type) {
				switch (type) {

					case 'serve':
						this.isHotline = true;
						break;
				}
			},
			/**
			 * 去订单
			 */
			onToOrder() {
				uni.navigateTo({
					url: '/pages/MyOrderList/MyorderListConverge'
				})
				// this.$f.jump({
				//   url: '/pages/MyorderList/MyorderListConverge'
				// })
			},
			/**
			 * 分类点击
			 */
			onClassFiy(item) {
				if(!this.hasLogin){
					this.$u.toast('您还未登录，即将前往登录')
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},2000)
					return
				}
				if(item.name=='客服中心'){
					// #ifdef H5
					window.location.href = `tel:185 8091 4007`
					// #endif
					return
				}
				uni.navigateTo({
					url:item.url
				})
			},
			/*上拉加载的回调*/
			upCallback(page) {
				//联网加载数据
				let _this = this
				this.goodsList.length > 0 && (this.showLoading = true)
				this.$u.api.indexGoodsList({
					page: page.num,
					id: 0,
					keyword: this.keyword,
          flags:'recommendation'
				}).then(res => {
					// console.log(res, '商品列表')
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					this.mescroll.endByPage(_this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总页数)
					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					// this.mescroll.endSuccess(res.msg.length, false); //必传参数(当前页的数据个数, 是否有下一页true/false)

					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
					// this.mescroll.endSuccess(res.list.length);
					if (page.num == 1) {
						_this.goodsList = []
					} else {} //如果是第一页需手动制空列表
					this.goodsList = this.goodsList.concat(res.msg.list); //追加新数据
					(this.showLoading = false)
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					(this.showLoading = false)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;

		.pp-list {
			flex-wrap: wrap;
			margin-bottom: 100rpx;
			padding: 0 20rpx;

			.li {
				width: 25%;
				height: 100rpx;
				margin-bottom: 20rpx;

				image {
					width: 100%;
					height: 100rpx;
				}
			}
		}

		.td-bg {
			width: 750rpx;
			height: 900rpx;
			position: relative;

			.tdConent {
				margin-top: 320rpx;
				text-align: center;
				padding-left: 10rpx;

				.td-input {
					display: block;
					margin: 0 auto;
					width: 370rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					background-color: #fff;
					border-radius: 45rpx;
					color: #000;
				}

				.btn {
					margin: 30rpx auto;
					width: 370rpx;
					height: 70rpx;
					line-height: 70rpx;
					border-radius: 45rpx;
					text-align: center;
					color: #000;
					background: linear-gradient(to right, #ecd19e, #faefd2);
				}
			}
		}

		/* 客服热线弹窗 */
		.serve-hotline {
			.cu-dialog {
				width: 100%;
				border-radius: 20rpx 20rpx 0 0 !important;
				padding: 30rpx 0;

				.contact-list {
					width: 100%;

					.list {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						height: 100rpx;

						text {
							color: #222222;
							font-size: 32rpx;
						}
					}

					.btn {
						width: 600rpx;
						height: 90rpx;
						line-height: 90rpx;
						text-align: center;
						color: #fff;
						background: #ae87d8;
						border-radius: 45rpx;
						color: #fff;
					}
				}
			}
		}

		.goods-discounts {
			padding: 0;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			margin: 20rpx;
		}

		.recommend-info {
			.recommend-title {
				padding: 30rpx 0;
				font-size: 36rpx;
				color: #353535;
				justify-content: center;
				.f-w{
					font-weight: bolder;
				}
				.icon-title {
					width: 167rpx;
					height: 35rpx;
					display: block;
					margin: 0 20rpx;
				}
			}
		}

		.huot {
			padding: 20rpx 60rpx;
			color: #998abe;
			margin-top: 20rpx;

			.huot-li {
				white-space: nowrap;
				margin-left: 25rpx;
			}

			.h-li {
				color: #998abe;
				padding: 0rpx 15rpx;
				background-color: #f2e9fc;
				margin-right: 20rpx;
				border-radius: 30rpx;
			}
		}

	}

	.converge {
		width: 100%;
		display: block;
		box-sizing: border-box;

		.icon-shopkeeper {
			width: 700rpx;
			display: block;
			margin: 20rpx auto;
			height: auto;
		}

		.footer-nav {
			position: fixed;
			right: 20rpx;
			bottom: 200rpx;

			.f-ico {
				display: block;
				width: 84rpx;
				height: 84rpx;
				margin-bottom: 10rpx;
			}
		}

		.qknav {
			padding: 20rpx 0;
			background: #fff;
			width: 100%;
			box-sizing: border-box;
			border-radius: 10rpx;

			.qknav_image {
				width: 110rpx;
				height: 110rpx;
				display: block;
				border-radius: 50%;
				margin: 0 auto;
			}

			.qknav_text {
				display: block;
				text-align: center;
				width: 100%;
				color: #353535;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}

		.search {
			background: #F0F0F0;
			padding: 20rpx 40rpx;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;

			.box3 {
				background: #fff;
				border-radius: 40rpx;
			}

			.box2 {
				margin-left: 30rpx;

				.img2 {
					width: 36rpx;
					height: 37rpx;
					display: block;
					margin: 0 auto;
					margin-bottom: 10rpx;
				}
			}

			.search-logo {
				width: 131rpx;
				height: 71rpx;
				display: block;
				margin-right: 30rpx;
			}
		}

		.nav-box {
			justify-content: space-between;
			color: #998abe;
			position: relative;

			.img1 {
				position: absolute;
				left: 0;
				width: 71rpx;
				height: 66rpx;
				margin-bottom: 10rpx;
			}

			.lt1 {
				margin-left: 40rpx;

				.text-a {
					min-width: 325rpx;
					height: 54rpx;
					padding-left: 40rpx;
					font-weight: bold;
					color: #000;

				}

				.hg-img {
					width: 38rpx;
					height: 34rpx;
					margin: 0 10rpx;
				}
			}

			.lt2 {
				.box1 {
					text-align: center;
					width: 100rpx;

					.img2 {
						width: 40rpx;
						height: 40rpx;
						display: block;
						margin: 0 auto;
					}
				}
			}
		}

		.top-model {
			padding: 20rpx;
			width: 100%;
			display: block;
			background-color: #fff;
			box-sizing: border-box;
		}

		.bg-height {
			width: 100%;
			display: block;
			height: 112rpx;
		}

		/* banner */
		.banner {
			display: block;
			width: 100%;
			margin-bottom: 30rpx;
			background: #fff;
			height: 340rpx;

			.screen-swiper {
				width: 100%;
				overflow: hidden;
				height: 340rpx;
				margin: 0 auto;
				display: block;
				min-height: 100% !important;

				.image {
					height: 340rpx;
					border-radius: 20rpx;
				}
			}
		}

	}

	.notice-box {
		margin: 20rpx 20rpx 0;
		background: #fff;
		padding: 20rpx 0;
		border-radius: 16rpx;

		.icon-notice {
			width: 111rpx;
			height: 33rpx;
			margin: 0 23rpx;
			display: block;
		}

		.swiper-box {
			padding-left: 20rpx;
			border-left: 1px dashed #333;
			height: 40rpx;

			.swiper-item {
				line-height: 40rpx;
			}
		}
	}
	::v-deep .downwarp-tip{
		display: none !important;
	}
	.border-radius50{
		border-radius: 20rpx;
	}
</style>